import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { useStore } from "@/store";
const [width, height] = [window.innerWidth, window.innerHeight];

const app = useStore();
console.log(app);

const scene = new THREE.Scene();
const gui = new GUI();
const matFolder = gui.addFolder("玻璃材质");
matFolder.close(); //关闭菜单

const group = new THREE.Group();
scene.add(group);
//加载汽车模型
const loader = new GLTFLoader();
const textureCube = new THREE.CubeTextureLoader()
  .setPath("libs/action/")
  .load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
textureCube.encoding = THREE.sRGBEncoding;
loader.load(
  "libs/car.glb",
  function (gltf) {
    group.add(gltf.scene);
    const mesh = gltf.scene.getObjectByName("玻璃01");
    mesh.material = new THREE.MeshPhysicalMaterial({
      metalness: 0.0, //玻璃非金属
      roughness: 0.0, //玻璃表面光滑
      envMap: textureCube, //环境贴图
      envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
      transmission: 1.0, //玻璃材质透光率，transmission替代opacity
      ior: 1.5, //折射率
    });

    const obj = {
      color: mesh.material.color.getHex(), // 获取材质默认颜色
    };
    // 材质颜色color
    matFolder.addColor(obj, "color").onChange(function (value) {
      mesh.material.color.set(value);
    });
    // 范围可以参考文档
    matFolder.add(mesh.material, "metalness", 0, 1);
    matFolder.add(mesh.material, "roughness", 0, 1);
    matFolder.add(mesh.material, "transmission", 0, 1);
    matFolder.add(mesh.material, "ior", 1, 2.333);
    matFolder.add(mesh.material, "envMapIntensity", 0, 10);
  },
  function (xhr) {
    app.percent = Math.floor((xhr.loaded / xhr.total) * 100);
  }
);

//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

//光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

// 环境光子菜单
const ambientFolder = gui.addFolder("环境光");
ambientFolder.close(); //关闭菜单
// 环境光强度
ambientFolder.add(directionalLight, "intensity", 0, 2);
// 平行光子菜单
const dirFolder = gui.addFolder("平行光");
dirFolder.close(); //关闭菜单
// 平行光强度
dirFolder.add(directionalLight, "intensity", 0, 2);
const dirFolder2 = dirFolder.addFolder("位置"); //子菜单的子菜单
dirFolder2.close(); //关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, "x", -400, 400);
dirFolder2.add(directionalLight.position, "y", -400, 400);
dirFolder2.add(directionalLight.position, "z", -400, 400);

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(-370, 270, 156);
camera.lookAt(0, 0, 0);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementById("three").appendChild(renderer.domElement);
renderer.outputEncoding = THREE.sRGBEncoding;
const controls = new OrbitControls(camera, renderer.domElement);

// scene.add(controls);
(function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
})();
